<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>表白墙</title>
    <style>
        .container {
            width: 400px;
            margin: 0 auto;
        }

        h1 {
            text-align: center;
        }

        p {
            text-align: center;
            color: grey;
        }

        .row {
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .row span {
            width: 100px;

        }

        .row input {
            width: 240px;
            height: 22px;
        }

        .row button {
            width: 100px;
            height: 30px;
            background-color: orange;
        }

        .row button:active{
            background-color: grey;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入后点击提交,将会把信息显示在表格中</p>
        <div class="row">
            <span>谁:</span>
            <input type="text">
        </div>
        <div class="row">
            <span>对谁:</span>
            <input type="text">
        </div>
        <div class="row">
            <span>说: </span>
            <input type="text">
        </div>
        <div class="row">
            <button>提交</button>
        </div>
    </div>

    <!--引入jQuery cdn-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

    <script>
        let container = document.querySelector('.container')
        let button = document.querySelector('button');
        button.onclick = function () {
            // 获取输入框中的内容
            let inputs = document.querySelectorAll('input');
            let from = inputs[0].value;
            let to = inputs[1].value;
            let message = inputs[2].value;
            if (from == '' || to == '' || message == '') {
                alert("当前输入框内容为空!");
                return;
            }
            console.log(from+" "+ to +" "+ message);

            let rowDiv = document.createElement('div');
            rowDiv.className = 'row';
            rowDiv.innerHTML = from + " 对 " + to + " 说: " + message;
            container.appendChild(rowDiv);
            for (let i = 0; i < inputs.length; i++) {
                inputs[i].value = '';
            }

            // 点击提交按钮,使用Ajax 构造 post请求
            // 构造 json 格式对象
            let data = {
                from: from,
                to: to,
                message: message
            }
            $.ajax({
                type: "post",
                url: "messageWall",
                // JS中把对象转成字符串
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf8",
                success: function (body) {
                    console.log("提交数据成功");
                }
            });
        }

        // 获取服务器数据
        function getMessages(){
            $.ajax({
                type: "get",
                url: "messageWall",
                success: function (body){
                    let container = document.querySelector('.container');
                    for (let i = 0; i < body.length; i++) {
                        let message = body[i];
                        // 构造一个div.row 来存放数据
                        let row = document.createElement('div');
                        row.className = 'row';
                        row.innerHTML = message.from + " 对 " + message.to +" 说 " + message.message ;
                        // 追加到父元素的末尾
                        container.appendChild(row);
                    }
                }
            });
        }

        getMessages();
    </script>
</body>

</html>